<template>
  <div>
    <header>
      <van-nav-bar title="选择支付方式" left-arrow @click-left="onClickLeft" />
    </header>
    <section>
      <div class="banner">
        <p>
          支付金额:
          <span>￥{{price}}</span>
        </p>
      </div>
      <div class="pay">
        <div class="item" v-tap="{methods:pwInput}" @click="show = true">
          <van-icon name="wechat" />
          <p>微信支付</p>
          <van-icon name="arrow" />
        </div>
        <div class="item" v-tap="{methods:pwInput}" @click="show = true">
          <van-icon name="alipay" />
          <p>支付宝支付</p>
          <van-icon name="arrow" />
        </div>
        <div class="item" v-tap="{methods:pwInput}" @click="show = true">
          <van-icon name="gold-coin" />
          <p>余额宝支付</p>
          <van-icon name="arrow" />
        </div>

        <van-overlay :z-index="100" :show="show" @click="show = false" />
      </div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import * as api from '../api/getProlist'
// 全局注册
Vue.use(Dialog);
export default {
  name: "Payfor",
  data() {
    return {
      price: "",
      value: "",
      showKeyboard: true,
      show: false,
      id: "",
      _id:''
    };
  },
  methods: {
    onClickLeft() {
      Dialog.confirm({
        title: "提示框",
        message: "确定放弃订单吗？"
      })
        .then(() => {
          // on confirm
          this.$router.push("/home");
        })
        .catch(() => {
          // on cancel
        });
    },
    pwInput() {
      if(this._id !=''){
        this.$router.push(`/payment?_id=${this._id}` );
      }else{
        this.$router.push(`/payment?id=${this.id}` );
      }
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
      if (this.value.length == 6) {
        this.showKeyboard = false;
      }
    },

	pwInput(){
		this.$router.push(`/payment?id=${this.id}&p=${this.$route.query.price}`)
	},
	 onInput(key) {
	  this.value = (this.value + key).slice(0, 6);
	  if(this.value.length==6){
		  this.showKeyboard=false
	  }
	},
	onDelete() {
	  this.value = this.value.slice(0, this.value.length - 1);
	}
  },
  mounted(){
    this.price=this.$route.query.price;
    this.id=this.$route.query.id;
	if(this.$route.query.price==0){
		this.price=this.$store.getters.OderList
	}

  }
};
</script>

<style scoped>
body {
  background-color: #f8f8f8;
}
.van-nav-bar .van-icon {
  color: #333;
  font-size: 22px;
}
.banner {
  width: 100%;
  height: 150px;
  background-color: #ff734c;
  overflow: hidden;
}
.banner p {
  width: 100%;
  margin-top: 25px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}
.banner p span {
  font-weight: 700;
  font-size: 22px;
}
.pay {
  position: absolute;
  top: 150px;
  padding: 0 15px;
}
.pay .item {
  height: 70px;
  width: 345px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 8px;
  background-color: #fff;
  margin-top: 15px;
  box-shadow: 1px 2px 6px #ddd;
  font-size: 14px;
  color: #666;
  box-sizing: border-box;
}
.pay .item .van-icon {
  font-size: 42px;
}
.pay .item .van-icon-arrow {
  font-size: 18px;
}
.pay .item p {
  width: 120px;
  margin-left: 20px;
  margin-right: 110px;
}
.van-icon-wechat {
  color: rgb(20, 202, 44);
}
.van-icon-alipay {
  color: rgb(50, 173, 245);
}
.van-icon-card {
  color: rgb(53, 102, 236);
}
.item img {
  width: 44px;
}
.pay .item{width: 290px;}
.pay .item p{width: 150px;margin-right: 0;}
.banner{background: #d44647;}
.van-icon-gold-coin:before{color: #d46161;}
</style>